<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue指令1</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <hr>
    <h2 v-text="author">作者名字</h2><br>
    <h2 v-text="tel">作者电话</h2><br>
    <h2>作者学校：  {{school}}</h2><br>

    <hr>
    <p>v-html的用法</p>
    <p v-text = "content"></p>
    <p v-html = "content"></p>

    <hr>
    <p>函数和点击事件的用法</p>
    <input type="button" value="v-on指令" v-on:click = "study">
    <input type="button" value="v-on简写" @click = "eat">
    <input type="button" value="v-on双击" @dblclick = "sleep">

    <hr>
    <h2 @click = "changefood">{{food}}  点击后，控制台输出番茄炒蛋</h2>


</div>

<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            // v-text的学习
            author:"lyh, h2中原有的信息被覆盖整体被替换",
            tel:"188xxxx1399，h2中原有的信息被覆盖整体被替换",
            school:"scut，使用插值表达式，只替换了大括号的内容",
            food:"番茄炒蛋",
            // v-html的学习
            content:"<a href='http://www2.scut.edu.cn/wusie/'>我的学院</a>"

        },
        // v-on的学习
        methods:{
            study:function () {
                alert("正在学习");
            },
            eat:function () {
                alert("正在吃饭");
            },
            sleep:function () {
                alert("正在睡觉觉");
            },
            changefood:function () {
                console.log(this.food);
            }
        }
    });
</script>

</body>
</html>